<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Tweet! Put Twitter on your site with this simple, unobtrusive jQuery widget</title>
  <link href="index.css" rel="stylesheet"/>
  <link href="jquery.tweet.css" rel="stylesheet"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  <script src="jquery.tweet.js" charset="utf-8"></script>
  <script type="text/javascript">
    function randomString(length) {
      var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split('');
      var str = '';
      for (var i = 0; i < length; i++) {
        str += chars[Math.floor(Math.random() * chars.length)];
      }
      return str;
    }
    var rnd = randomString(8);

    jQuery(function($) {
      $(".rnd").replaceWith(rnd);


      $(".demo .code").hide().each(function(i,e){
        $(e).before($('<a class="show-code" href="#">Show code &raquo;</a>').
                      click(function(ev) {
                        $(e).slideToggle();
                        $(this).hide();
                        ev.preventDefault();
                      }));

      }).each(function(i, e){ eval($(e).text()); });
    });
  </script>
</head>
<body>
  <h1>Tweet!</h1>
  <h2>put <a href="http://twitter.com">twitter</a> on your website with <em>tweet!</em>, an unobtrusive javascript plugin for jquery.</h2>

  <p>Check out the script in action at <a href="http://seaofclouds.com">seaofclouds.com</a>, and see the following demos.</p>

  <h3>Examples</h3>

  <div class="demo">
    <p><a name="1" class="num">#1</a> - Displaying three tweets from the <a href="http://twitter.com/seaofclouds">seaofclouds twitter feed</a>:</p>
    <pre class="code">
      jQuery(function($){
        $(".tweet").tweet({
          join_text: "auto",
          username: "seaofclouds",
          avatar_size: 48,
          count: 3,
          auto_join_text_default: " we said, ",
          auto_join_text_ed: " we ",
          auto_join_text_ing: " we were ",
          auto_join_text_reply: " we replied ",
          auto_join_text_url: " we were checking out ",
          loading_text: "loading tweets..."
        });
      });
    </pre>
    <div class='tweet query'></div>
  </div>

  <div class="demo">
    <p><a name="2" class="num">#2</a> - Displaying up to four tweets with the query "<a href="http://search.twitter.com/search?q=tweet.seaofclouds.com">tweet.seaofclouds.com</a>":</p>
    <pre class="code">
      jQuery(function($){
        $("#query").tweet({
          avatar_size: 32,
          count: 4,
          query: "tweet.seaofclouds.com",
          loading_text: "searching twitter..."
        });
      });
    </pre>
    <div id="query" class='query'></div>
  </div>

  <div class="demo">
    <p><a name="3" class="num">#3</a> - Displaying up to three links with the search query "<a href="http://search.twitter.com/search?q=from%3Aseaofclouds%20http">from:seaofclouds http</a>":</p>
    <pre class="code">
      jQuery(function($){
        $("#userandquery").tweet({
          count: 3,
          query: "from:seaofclouds http",
          loading_text: "searching twitter..."
        });
      });
    </pre>
    <div id='userandquery' class="query"></div>
  </div>

  <div class="demo">
    <p><a name="4" class="num">#4</a> - Displaying four tweets from the two users "seaofclouds" and "laughingsquid", refreshing every 60 seconds:</p>
    <p><small><em>(Note that it's more reliable to display multiple users' tweets by using a list - see below)</em></small></p>
    <pre class="code">
      jQuery(function($){
        $("#fromtwo").tweet({
          avatar_size: 32,
          count: 4,
          username: ["seaofclouds", "laughingsquid"],
          loading_text: "searching twitter...",
          refresh_interval: 60
        });
      });
    </pre>
    <div id='fromtwo' class="query"></div>
  </div>

  <div class="demo">
    <p><a name="5" class="num">#5</a> - Displaying tweets from users on the 'team' list of 'twitter':</p>
    <pre class="code">
      jQuery(function($){
        $("#list").tweet({
          avatar_size: 32,
          count: 4,
          username: "twitter",
          list: "team",
          loading_text: "loading list..."
        });
      });
    </pre>
    <div id='list' class="query"></div>
  </div>

  <div class="demo">
    <p><a name="6" class="num">#6</a> - Displaying the user sanityinc's favorite tweets, and using a handler
     for tweet's "loaded" event to make links open in a new window:</p>
    <pre class="code">
      jQuery(function($){
        $("#favorites").tweet({
          avatar_size: 32,
          count: 3,
          username: "sanityinc",
          favorites: true,
          loading_text: "loading list..."
        }).bind("loaded",function(){$(this).find("a").attr("target","_blank");});
      });
    </pre>
    <div id="favorites" class="query"></div>
  </div>

  <div class="demo">
    <p><a name="7" class="num">#7</a> - Fetch 20 tweets, but filter out @replies, and display only 3:</p>
    <pre class="code">
      jQuery(function($){
        $("#filter").tweet({
          avatar_size: 32,
          count: 3,
          fetch: 20,
          filter: function(t){ return ! /^@\w+/.test(t.tweet_raw_text); },
          username: "sanityinc"
        });
      });
    </pre>
    <div id='filter' class="query"></div>
  </div>

  <div class="demo">
    <p><a name="8" class="num">#8</a> - Customize the layout to eliminate the date stamps and avatars, add an action (aka "web intent") link,
      and make it open in a popup window:</p>
    <pre class="code">
      jQuery(function($){
        $("#custom").tweet({
          avatar_size: 32,
          count: 4,
          username: "seaofclouds",
          template: "{text} &raquo; {retweet_action}"
        });
      }).bind("loaded", function(){
        $(this).find("a.tweet_action").click(function(ev) {
          window.open(this.href, "Retweet",
                      'menubar=0,resizable=0,width=550,height=420,top=200,left=400');
          ev.preventDefault();
        });
      });
    </pre>
    <div id='custom' class="query"></div>
  </div>

  <div class="demo">
    <p><a name="9" class="num">#9</a> - Adding a message when no tweets matching '<span class="rnd">somerandomstring</span>' are found:</p>
    <pre class="code">
      jQuery(function($){
        $("#empty").tweet({
          avatar_size: 32,
          count: 4,
          query: rnd,
          loading_text: "searching twitter..."
        }).bind("empty", function() { $(this).append("No matching tweets found"); });
      });
    </pre>
    <div id='empty' class="query"></div>
  </div>


  <div class="demo">
    <p><a name="10" class="num">#10</a> - use button to page forwards and backwards:</p>
    <pre class="code">
      jQuery(function($){
        var options = {
          username: "seaofclouds",
          page: 1,
          avatar_size: 32,
          count: 4,
          loading_text: "loading ..."
        };

        var widget = $("#paging .widget"),
          next = $("#paging .next"),
          prev = $("#paging .prev");

        var enable = function(el, yes) {
          yes ? $(el).removeAttr('disabled') :
                $(el).attr('disabled', true);
        };

        var stepClick = function(incr) {
          return function() {
            options.page = options.page + incr;
            enable(this, false);
            widget.tweet(options);
          };
        };

        next.bind("checkstate", function() {
          enable(this, widget.find("li").length == options.count)
        }).click(stepClick(1));

        prev.bind("checkstate", function() {
          enable(this, options.page > 1)
        }).click(stepClick(-1));

        widget.tweet(options).bind("loaded", function() { next.add(prev).trigger("checkstate"); });
      });
    </pre>
    <div id="paging">
      <div class="widget query"></div>
      <div class="controls">
        <button class="prev" type="button" disabled>&larr;</button>
        <span class="pagenum"></span>
        <button class="next" type="button" disabled>&rarr;</button>
      </div>
    </div>
  </div>

  <div class="demo">
    <p><a name="11" class="num">#11</a> - display one tweet at a time like a ticker:</p>
    <pre class="code">
      jQuery(function($){
        $("#ticker").tweet({
          username: "seaofclouds",
          page: 1,
          avatar_size: 32,
          count: 20,
          loading_text: "loading ..."
        }).bind("loaded", function() {
          var ul = $(this).find(".tweet_list");
          var ticker = function() {
            setTimeout(function() {
              ul.find('li:first').animate( {marginTop: '-4em'}, 500, function() {
                $(this).detach().appendTo(ul).removeAttr('style');
              });
              ticker();
            }, 5000);
          };
          ticker();
        });
      });
    </pre>
    <style type="text/css">
      #ticker ul.tweet_list {
        height:4em;
        overflow-y:hidden;
      }
      #ticker .tweet_list li {
        height: 4em;
      }
    </style>
    <div id="ticker" class="query"></div>
  </div>

  <h3>Features</h3>
  <ul>
    <li>small size and fast download time</li>
    <li>will not slow down or pause your page while tweets are loading</li>
    <li>display up to 100 tweets, as permitted by the twitter search api</li>
    <li>display tweets from a twitter search, or from your own feed</li>
    <li>optional verb tense matching, for human readable tweets</li>
    <li>optionally display your avatar</li>
    <li>optionally display tweets from multiple accounts!</li>
    <li>display tweets from a list, or display a user's favorites</li>
    <li>optional reloading after a specified delay</li>
    <li>automatic linking of  @replies to users&#8217; twitter page</li>
    <li>automatic linking of URLs</li>
    <li>uses <a href="http://apiwiki.twitter.com/Twitter-Search-API-Method%3A-search">Twitter's Search API</a>, so you can display any tweets you like</li>
    <li>Display up to 100 tweets that have been posted within 7 days (limit set by <a href="http://apiwiki.twitter.com/Twitter-Search-API-Method%3A-search">Twitter's Search API</a>)</li>
    <li>automatic linking of <a href="http://search.twitter.com/search?q=&amp;tag=hashtags">#hashtags</a>, to a twitter search of all your tags</li>
    <li>converts &lt;3 to a css styleable <span class='heart'>♥</span> (we ♥ hearts)</li>
    <li>customize the layout for tweets within the widget</li>
    <li>apply custom filters, e.g. to remove @replies</li>
    <li>define a custom sort order for tweets</li>
    <li>customize the style with your own stylesheet or with other jquery plugins</li>
    <li>compatible with most jquery versions, from 1.2.6 to the latest 1.7</li>
    <li>supports <a href="http://requirejs.org">RequireJS</a> and other <a href="https://github.com/amdjs/amdjs-api/wiki/AMD">AMD-compatible</a> javascript loaders</li>
  </ul>

  <p><strong>NOTE:</strong> Some users have reported that they <a href="http://help.twitter.com/forums/10713/entries/42646">do not show up in Twitter's search results</a>.</p>

  <div class='download'>
    <h3>Download</h3>
    <p>
      <a href="https://github.com/seaofclouds/tweet/zipball/master">
        <img width="90" src="https://github.com/images/modules/download/zip.png"></a>
      <a href="https://github.com/seaofclouds/tweet/tarball/master">
        <img width="90" src="https://github.com/images/modules/download/tar.png"></a>
    </p>
  </div>

  <h3>Usage</h3>
  <p><strong>1.</strong> <a href="http://jquery.com/">Get JQuery</a>. In these examples, we use <a href="http://code.google.com/apis/ajaxlibs/">Google's AJAX Libraries API</a>.
  <p><strong>2.</strong> include jQuery and jquery.tweet.js files in your template's <span class="code">&lt;head&gt;</span>.</p>
  <code>
    &lt;script language=&quot;javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;<br />
    &lt;script language=&quot;javascript&quot; src=&quot;/tweet/jquery.tweet.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  </code>
  <p><strong>3.</strong> Also in <span class="code">&lt;head&gt;</span>, Initialize tweet! on page load with your Username and other options</p>
  <code>
    &lt;script type=&apos;text/javascript&apos;&gt;<br />
    &nbsp; &nbsp; jQuery(function($){<br />
    &nbsp; &nbsp; &nbsp; &nbsp; $(".tweet").tweet({<br />
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; username: "seaofclouds",<br />
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; join_text: "auto",<br />
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; avatar_size: 32,<br />
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; count: 3,<br />
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; auto_join_text_default: "we said,", <br />
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; auto_join_text_ed: "we",<br />
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; auto_join_text_ing: "we were",<br />
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; auto_join_text_reply: "we replied to",<br />
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; auto_join_text_url: "we were checking out",<br />
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; loading_text: "loading tweets..."<br />
    &nbsp; &nbsp; &nbsp; &nbsp; });<br />
    &nbsp; &nbsp; });<br />
    &lt;/script&gt;
  </code>
  <p><strong>4.</strong> In <span class="code">&lt;body&gt;</span>, include a placeholder for your tweets. They'll get loaded in via JSON. How fancy!</p>
  <code>
    &lt;div class=&quot;tweet&quot;&gt;&lt;/div&gt;
  </code>
  <p><strong>5.</strong> Style with our stylesheet in <span class="code">&lt;head&gt;</span>, or modify as you like!</p>
  <code>
    &lt;link href=&quot;jquery.tweet.css&quot; media=&quot;all&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
  </code>

  <h3>Contribute</h3>
  <p>Bring your code slinging skills to <a href="https://github.com/seaofclouds/tweet/">Github</a> and help us develop new features for tweet!</p>
  <code>
    git clone git://github.com/seaofclouds/tweet.git
  </code>
  <a href="https://github.com/seaofclouds/tweet"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub" /></a>
  <p>
    <strong>Report bugs and request features</strong> in <a href="https://github.com/seaofclouds/tweet/issues">Github Issues</a>
  </p>
  <h3>Licensed under the MIT</h3>
  <code>
    <a href="http://www.opensource.org/licenses/mit-license.php">http://www.opensource.org/licenses/mit-license.php</a>
  </code>
  <p class='copyright'>something nifty from <a href="http://seaofclouds.com">seaofclouds</a><span class="trade">&trade;</span> | <a href="https://github.com/seaofclouds/tweet/">contribute</a></p>
</body>
</html>
